<template>
  <div class="evalute-container">
    <div class="photo">
      <img v-lazy="evalute.userHeadImg" alt="买家头像">
    </div>
    <div class="content">
      <!-- 用户名和用户评价时间 -->
      <div class="title">
        <div class="name">{{evalute.userName}}</div>
        <div class="clear"></div>
      </div>
      <!-- 卖家评价的内容 -->
      <div class="message">{{evalute.evaluateInfo}}</div>
      <!-- 卖家上传的图片 -->
      <div class="image" v-if="evalute.evaluatePhotos && evalute.evaluatePhotos.length > 0">
        <!-- 缩略图 -->
        <div class="small">
          <div class="icon" 
            v-for="(img, $index) in evalute.evaluatePhotos" 
            @click="showCurrentEvaluteImage($index)" 
            :class="{active: showImageIndex == $index && !isFirstClick}" 
            :style="{'background-image': `url(${img})`}"></div>
        </div>
        <!-- 点击了缩略图展示的大图 -->
        <div class="big" v-show="!isFirstClick">
          <img alt="评价图片"
            :class="{hidden: showImageIndex != $index}"
            v-for="(img, $index) in evalute.evaluatePhotos"
            :src="img">
        </div>
      </div>
      <div class="time">{{evalute.addTtime | formDate}}</div>
    </div>
    <div class="clear"></div>
  </div>
</template>

<script>
import { formatDate } from '../../../common/util'
export default {
  props: {
    evalute: {
      type: Object,
      default: () => { return {} }
    }
  },
  data() {
    return {
      showImageIndex: -1,
      addTime: '',
      isFirstClick: true
    }
  },
  methods: {
    /**
     * 点击缩略图展示大图
     *
     * @param {Integer} $index 当前需要查看的第几张图片
     */
    showCurrentEvaluteImage($index) {
      // 如果和当前展示的缩略图又被点击了一次，则隐藏缩略图
      if (this.showImageIndex == $index && !this.isFirstClick) {
        this.isFirstClick = true
        return
      }

      // 展示被点击的缩略图对应的大图
      this.showImageIndex = $index

      // 设置不为第一次点击
      this.isFirstClick = false
    }
  },
  filters: {
    formDate(value) {
      return formatDate(new Date(value), 'yyyy-MM-dd hh:mm:ss')
    }
  }
}
</script>

<style lang="scss" scoped>
.evalute-container {
  .photo {
    border-radius: 76px;
    float: left;
    height: 76px;
    width: 76px;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }
  .content {
    float: right;
    width: calc(100% - 76px);
    padding: 5px 20px;

    .title {
      .name {
        color: #333333;
        display: inline-block;
        float: left;
        font-size: 16px;
      }
    }
    .message {
      color: #666666;
      font-size: 14px;
      margin-top: 20px;
    }
    .image {
      margin-top: 6px;

      .small {
        .icon {
          background-size: 100% 100%;
          border: 1px solid #444444;
          cursor: pointer;
          display: inline-block;
          width: 60px;
          height: 60px;
          margin-right: 10px;
          position: relative;

          &:after {
            border-top: 4px solid #444444;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            content: "";
            display: none;
            position: absolute;
            bottom: -5px;
            left: 20px;
          }

          &.active:after {
            display: block;
          }
        }
      }
      .big {
        img {
          border: 1px solid #444444;
          display: inline-block;
          width: 350px;
          height: auto;
          margin-top: 2px;
        }
        .hidden {
          display: none;
        }
      }
    }
    .time {
      color: #999999;
      display: inline-block;
      font-size: 12px;
      margin-top: 16px;
    }
  }
  .clear {
    clear: both;
  }
}
</style>